<template>
	<view class="upd">
		<view class="con">
			<text>手机号</text>
			<input type="number" maxlength="16" v-model="phone" />
		</view>
		<view class="con-code">
			<text class="left-text">验证码</text>
			<input maxlength="6" type="number" v-model="code" />
			<text @click="getCode" class="code-show" v-if="isShowCode">获取验证码</text>
			<text class="code-not-show" v-else>请稍后（{{time}}）</text>
		</view>
		<view class="con">
			<text>新密码</text>
			<input maxlength="6" type="password" v-model="newPwd" />
		</view>
		<view class="con">
			<text>确认密码</text>
			<input maxlength="6" type="password" v-model="qdNewPwd" />
		</view>

		<view class="bottom">
			<view class="btn" @click="updatePwd">
				<text>提交新密码</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		httpForgetPwd
	} from '@/api/http/main/my/pay.js'

	import {
		httpGetCode
	} from '@/api/http/login/login.js'

	export default {
		data() {
			return {
				code: '',
				newPwd: '',
				qdNewPwd: '',
				isShowCode: true,
				time: 60,
				phone: ''
			}
		},
		methods: {
			//1，获取验证码
			getCode() {
				//手机号检验
				var reg = /^1[0-9]{10,10}$/;
				if (!this.phone || !reg.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}

				//开始倒计时
				this.isShowCode = false
				this.timeDown()
				//发起获取验证码请求

				httpGetCode(this.phone).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					uni.$showMsg('验证码发送成功！')
				})
			},
			timeDown() {
				if (this.time > 0) {
					this.time--;
					setTimeout(this.timeDown, 1000);
				} else {
					this.isShowCode = true;
					this.time = 60;
				}
			},

			updatePwd() {
				if (this.phone == '' || this.code == '' || this.newPwd == '' || this.qdNewPwd == '') {
					return uni.$showMsg('请输入正确密码！');
				}
				if (this.newPwd != this.qdNewPwd) {
					return uni.$showMsg('两次密码不正确！');
				}
				if (this.newPwd.length != 6) {
					return uni.$showMsg('密码长度固定为6！');
				}

				httpForgetPwd(this.code, this.newPwd, this.phone).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					return uni.$showMsg('支付密码已修改！');
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.upd {
		width: 100%;
		min-height: 100vh;
		background-color: rgba(248, 248, 248, 1);
	}


	.con-code {
		width: 92%;
		padding: 0 4%;
		background-color: #fff;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;

		.left-text {
			width: 25%;
		}

		input {
			width: 40%;
			height: 60rpx;
			margin-top: 20rpx;
			border-bottom: 1rpx solid #eee;
		}

		.code-show {
			color: skyblue;
			width: 35%;
		}

		.code-not-show {
			color: #bfbfbf;
			width: 35%;
		}
	}

	.con {
		width: 92%;
		padding: 0 4%;
		background-color: #fff;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;

		text {
			width: 25%;
		}

		input {
			width: 70%;
			height: 60rpx;
			margin-top: 20rpx;
			border-bottom: 1rpx solid #eee;
		}
	}

	.bottom {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;

		.btn {
			width: 60%;
			margin-left: 20%;
			height: 80rpx;
			border-radius: 50rpx;
			background-color: #26C55E;
			line-height: 80rpx;
			text-align: center;

			text {
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
</style>